<template>
  <div>
    <el-col :span='10' class="addBanner">
      <el-form
        :model="bannerForm"
        :rules="rules" 
        ref="bannerForm"
        label-width="100px"
        class="addBannerForm">
        <!-- 标题 -->
        <el-form-item label="标题" prop="name">
          <el-input v-model="bannerForm.name" placeholder="请输入标题"></el-input>
        </el-form-item>
        <!-- 展示位置 -->
        <el-form-item label="展示位置" prop="desc">
          <el-select v-model="bannerForm.desc">
                <el-option
                  v-for="item in editBannerSelects"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
        </el-form-item>
        <!-- 上传 -->
        <el-form-item label="轮播图" prop="img">
          <el-upload
            class="upload-demo"
            drag
            action="/oss/service/file/upload"
            :on-success="upLoadImg"
            :limit=1>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
            <div class="el-upload__tip" slot="tip">
              只能上传jpg/png文件，尺寸为750*360
            </div>
          </el-upload>
        </el-form-item>
        <!-- 跳转连接 -->
        <el-form-item label="跳转连接" prop="Url">
          <el-input v-model="bannerForm.Url" placeholder="请输入跳转连接/banner/10格式"></el-input>
        </el-form-item>
        <!-- 上架时间 -->
        <p class="sjtitle">上架操作</p>
        <el-form-item label="上架时间">
          <el-col :span="11">
            <el-form-item >
              <el-date-picker
                v-model="bannerForm.startTime"
                type="datetime"
                placeholder="选择日期时间"
                align="right">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col class="line" :span="1">-</el-col>
          <el-col :span="11">
            <el-form-item >
                <el-date-picker
                    v-model="bannerForm.stopTime"
                    type="datetime"
                    placeholder="选择日期时间"
                    align="right">
                </el-date-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
        <!-- 排序-->
        <el-form-item label="排序" prop="sort">
          <el-input
            v-model="bannerForm.sort"
            placeholder="请输入正整数，值越大越靠前"></el-input>
        </el-form-item>
        <!-- 状态-->
        <el-form-item label="状态">
          <el-select v-model="bannerForm.inUse">
            <el-option
              v-for="item in editShelfStatus"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('bannerForm')">提交</el-button>
          <el-button @click="resetForm('bannerForm')">返回</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </div>
</template>
<script>
import {insertBanner} from '../../http/content'
export default {
  data() {
    // 跳转连接正则
    var jumpUrl = (rule, value, callback) => {
      let bannerUrlReg = /\/banner\/\d+$/g;
      if(value ==''){
        callback(new Error('请输入跳转url'));
      }else if (!bannerUrlReg.test(value) && value != '') {
        callback(new Error("请输入正确的跳转url"));
      } else {
        callback();
      }
    };
    //排序正则
    var Vsort = (rule, value, callback) => {
      let sortReg = /^\d+$/g;
      if(value ==''){
        callback(new Error('请输入正整数'));
      }else if (!sortReg.test(value) && value != '') {
        callback(new Error("请输入正确的正整数"));
      } else {
        callback();
      }
    };
    return {
      //轮播位置类型
      editBannerSelects: [
        {
          value: "首页轮播",
          label: "首页轮播",
        },
        {
          value: "商城轮播",
          label: "商城轮播",
        },
      ],
      //编辑上架状态
      editShelfStatus: [
        {
          value: true,
          label: "上架",
        },
        {
          value: false,
          label: "下架",
        },
      ],
      bannerForm: {
        name: "",//标题
        desc: "首页轮播",//展示轮播图位置
        img: "",//上传图片地址
        startTime: "",//开始时间
        stopTime:"",//结束时间
        inUse:true,//上架状态
        sort:"10",//排序序号
        Url:"",//跳转地址
      },
      rules: {
        name: [
          { required: true, message: "请输入标题", trigger: "blur" },
          { min: 1, max: 10, message: "长度在 1 到 100 个字符", trigger: "blur" },
        ],
        Url: [
          {validator: jumpUrl, trigger: "blur" },
        ],
        sort:[
          { min: 1, max: 5, message: "长度在 1 到 10 个字符", trigger: "blur" },
          {validator: Vsort, trigger: "blur" }
        ],
      }
    };
  },
  methods: {
    //上传图片返回url
    upLoadImg(response){
      this.bannerForm.img = response.data.fileUrl;
    },
    //提交事件
    submitForm(formName) {
      console.log('提交的表单数据',this.bannerForm);
      this.$refs[formName].validate((valid) => {
        if (valid) {
          insertBanner(this.bannerForm)
            .then(res => {
              if(res.data.code != 20000) {
                return this.$message.error(res.data.message);
              }
              this.$message.success('添加成功');
              this.$router.push('/content/banner')
            })
            .catch(err => {
              this.$message.error(err);
            });
        } else {
          this.$message.error('提交内容不能为空');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.$router.push("/content/banner");
    }
  }
};
</script>
<style lang="less">
  .sjtitle {
    margin: 10px 0px 20px 10px;
    font-size: 20px;
  }
  .addBannerForm{
      padding-top: 50px;
      padding-left: 30px;
  }
</style>
